<template>
  <div class="hv-visual-layout">
    <div class="hv-visual-layout-header">
      <div class="hv-visual-layout-header-logo">
        <div class="hv-visual-layout-header-logo-img">
          <img src="@/visual/assets/img/logo.png" />
        </div>
        <div class="hv-visual-layout-header-logo-title">{{ dashboardTitle }}</div>
      </div>
      <div class="hv-visual-layout-header-menus">
        <a-menu mode="horizontal" :selectedKeys="[route.path]">
          <a-menu-item :key="menu.menuId" v-for="menu in menuList" @click="menu.action">
            <hv-dynamic-icon :iconName="menu.icon" />
            {{ menu.menuName }}
          </a-menu-item>
        </a-menu>
      </div>
    </div>
    <div class="hv-visual-layout-body">
      <router-view />
    </div>
    <hv-spinning />
  </div>
</template>

<script lang="ts">
  import { dashboardTitle } from '@/visual/configs/dashboard-conifg';
  import { defineComponent } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useVisualConfigStore } from '@/visual/stores/visual-config';

  export default defineComponent({
    name: 'VisualLayout',
    setup() {
      const router = useRouter();
      const route = useRoute();
      const useVisualConfig = useVisualConfigStore();

      const visualRoot = useVisualConfig.getRoutePath.visualRoot;

      const menuList = [
        {
          icon: 'DashboardOutlined',
          menuId: visualRoot + '/dashboardList',
          menuName: '仪表板列表',
          action: () => {
            router.push({ path: visualRoot + '/dashboardList' });
          },
        },
        {
          icon: 'SettingOutlined',
          menuId: visualRoot + '/resourceLibList',
          menuName: '素材库',
          action: () => {
            router.push({ path: visualRoot + '/resourceLibList' });
          },
        },
      ];
      return {
        menuList,
        dashboardTitle,
        route,
      };
    },
  });
</script>

<style lang="less" scoped>
  @import './VisualLayout.less';
</style>
